<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./d3.min.js">
  </script>
  <style>
    body{
      overflow: hidden;
    }
    #togo{
      width: 100%;
      height:900px;
      border:1px solid #ccc;
      user-select: none;
    }
    #togo text{
      font-size:10px;/*和js里保持一致*/
      fill:#1A2C3F;
      text-anchor: middle;
    }
    #togo .node-other{
 
      text-anchor: start;
    }
    #togo .health1{
      stroke:#92E1A2;
    }
    #togo .health2{
      stroke:orange;
    }
    #togo .health3{
      stroke:red;
    }
    #togo #cloud,#togo #database{
      fill:#ccc;
    }
    #togo .link{
      stroke:#101010;
    }
    #togo .node-title{
      font-size: 14px;
    }
    #togo .node-code circle{
      fill:#3F86F5;
    }
    #togo .node-code text{
      fill:#fff;
    }
    #togo .node-bg{
      fill:#fff;
      fill-opacity: 0.2;
    }
    #togo .arrow{
      fill:#060606;
    }
    #togo .group{
       pointer-events: none;
    }
  </style>
  <script src="data.js"></script>
</head>
<body>
 <svg id="togo" width="1020" height="1200">
 
 </svg>
 <script src="togo2.js"></script>
 <script>
 
 </script>
 
 <script>
  let t=new Togo('#togo',__options);
  t.render();
 </script>
</body>
</html>